Day27：練習弄個canvas

2019 iT 邦幫忙鐵人賽

DAY 27

自我挑戰組

三十天用Vue.jS打造一個網路商城系列第 27 篇

2019鐵人賽

Nissen

2018-11-09 01:30:07

2533 瀏覽

分享至

閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

題目：三十天用Vue.jS打造一個網路商城
挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城
本篇性質：期中考週，沒時間趕進度，所以做一些小研究好了。

▌前言

一直知道CANVAS可以用來畫圖，但是不知道怎畫。

▌ Canvas

Canvas是html提供的原生標籤，因此可以在html放個canvas標籤，然後開始畫圖

<body>
    <canvas id="mycanvas"></canvas>

    <script>
        var canvas = document.getElementById("mycanvas")
        var ctx = canvas.getContext("2d")
//指定畫布大小
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
//開始繪圖
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, 100)
        ctx.lineTo(50, 50)
        ctx.closePath()
        ctx.fillStyle = "red"
        ctx.fill()
    </script>
</body>